<script setup lang="ts">
import { ref, computed, reactive } from 'vue';
import { useCountDown } from '@vant/use';
import { cardBindApply } from '@/common/api/bankCard';

const emit = defineEmits<{
  (e: 'onCodeSubmit', value: typeof codeForm): void;
}>();

const props = withDefaults(defineProps<{ formData: Record<string, any> }>(), {
  formData: () => ({}),
});

const show = ref(false);
const codeForm = reactive({
  verify_code: '',
  order_id: '',
  trans_id: '',
});
const first = ref(true);

// 倒计时60秒
const countDown = useCountDown({
  time: 60 * 1000,
  onFinish() {
    countDown.reset();
  },
});

// 倒计时是否开启 true:倒计时已开启
const isStart = computed(() => countDown.current.value.total / 1000 !== 60);

// 按钮文案
const text = computed(() => {
  let t = '';
  if (!isStart.value) {
    t = first.value ? '发送验证码' : '重新获取';
  } else {
    t = `${(countDown.current.value.total / 1000).toFixed(0)}s`;
  }
  return t;
});

// 开启倒计时
const startCountDown = () => {
  countDown.start();
  first.value = false;
};

// 获取验证码
const loading = ref(false);
const handleClickCode = async () => {
  if (isStart.value) return false;
  loading.value = true;
  try {
    const res = await cardBindApply({
      ...props.formData,
      cert_validity_type: parseInt(props.formData.cert_validity_type),
    });
    Object.assign(codeForm, res.result.data);
    // console.log('codeForm: ', codeForm);
    startCountDown();
  } catch {
    /** empty */
  } finally {
    loading.value = false;
  }
};

// 弹窗关闭
const close = () => {
  show.value = false;
  // 重置状态
  codeForm.verify_code = '';
};

// 弹窗提交
const onSubmit = () => {
  emit('onCodeSubmit', { ...codeForm });
  close();
};

defineExpose({
  open() {
    show.value = true;
    handleClickCode();
  },
});
</script>
<template>
  <div class="codeDialog">
    <van-dialog v-model:show="show" @close="close">
      <template #title>
        <div class="text-left pl-5 mb-5">输入短信验证码</div>
      </template>
      <div class="flex justify-center px-3">
        <van-field class="custom-field" type="number" v-model="codeForm.verify_code" placeholder="请输入验证码">
          <template #button>
            <van-loading v-if="loading" size="24px" />
            <div
              v-else
              class="cursor-pointer"
              :style="{ color: isStart ? 'var(--van-cell-value-color)' : '#EC2D69' }"
              @click="handleClickCode"
            >
              {{ text }}
            </div>
          </template>
        </van-field>
      </div>
      <template #footer>
        <div class="flex justify-end p-5">
          <van-button class="w-[95px] !mr-3" round @click="close">取消</van-button>
          <van-button
            class="w-[123px]"
            round
            type="primary"
            color="#EC2D69"
            :loading="loading"
            :disabled="!codeForm.verify_code"
            @click="onSubmit"
          >
            确认
          </van-button>
        </div>
      </template>
    </van-dialog>
  </div>
</template>
<style lang="less" scoped></style>
